<template>
  <div class="home" v-if="category">
    <nav-bar></nav-bar>
    <div class="categorytab">
      <div class="category-ico" @click="$router.push('/editcategory')">
        <van-icon name="setting-o" />
      </div>
      <van-tabs v-model="active" swipeable sticky animated>
        <van-tab v-for="(v, index) in category" :key="index" :title="v.title">
          <van-list
            v-model="v.loading"
            :immediate-check="false"
            :finished="v.finished"
            finished-text="我也是有底线的"
            @load="onLoad"
          >
            <div class="detailparent">
              <cover
                class="detailitem"
                :detailitem="categoryitem"
                v-for="(categoryitem, categoryindex) in v.list"
                :key="categoryindex"
              />
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import NavBar from '@/components/common/Navbar'
  import Cover from './cover'
  export default {
    data() {
      return {
        category: [],
        active: 0,
      }
    },
    components: {
      NavBar,
      Cover,
    },
    activated() {
      if (localStorage.getItem('newCat')) {
        const res = JSON.parse(localStorage.getItem('newCat'))
        this.changeCategory(res)
        this.selectArticle()
      }
    },
    methods: {
      async selectCategory() {
        if (localStorage.getItem('newCat')) {
          const res = JSON.parse(localStorage.getItem('newCat'))
          this.changeCategory(res)
          this.selectArticle()
        } else {
          const res = await this.$http.get('/category')
          this.changeCategory(res.data)
        }
      },
      changeCategory(data) {
        const category = data.map((item, index) => {
          item.list = []
          item.page = 0
          item.finished = false
          item.loading = false
          item.pagesize = 10
          return item
        })
        this.category = category
        this.selectArticle()
      },
      async selectArticle() {
        const categoryitem = this.categoryItem()
        const res = await this.$http.get('/detail/' + categoryitem._id, {
          params: {
            page: categoryitem.page,
            pagesize: categoryitem.pagesize,
          },
        })
        categoryitem.list.push(...res.data)
        categoryitem.loading = false
        if (res.data.length < categoryitem.pagesize) {
          categoryitem.finished = true
        }
      },
      onLoad() {
        const categoryitem = this.categoryItem()
        setTimeout(() => {
          categoryitem.page += 1
          this.selectArticle()
        }, 1000)
      },
      categoryItem() {
        const categoryitem = this.category[this.active]
        return categoryitem
      },
    },
    watch: {
      active() {
        //  this.categoryItem()
        this.selectArticle()
      },
    },
    created() {
      this.selectCategory()
    },
  }
</script>

<style lang="stylus" scoped>
  .home
    background-color: white

  .detailparent
    display: flex
    flex-wrap: wrap
    justify-content: space-around

    .detailitem
      margin: 1.389vw 0
      width: 45%

  .categorytab
    position: relative

    .category-ico
      position: absolute
      z-index: 5
      right: 0
      top: 1.944vw
      padding: 1.389vw 5.556vw
      color: #ff9db5
      text-align: center
      font-size: 5.367vw
</style>
<style lang="stylus">
  .van-tabs--line
    padding-top: 0

  .van-sticky
    width: 86.111vw

  .van-list
    .van-loading
      width: 100% !important
</style>